﻿@{
    ViewBag.Title = "Index";
}
<h1>
    Manage Clients</h1>
<div align="center">
    <table id="jqgClients" cellpadding="0" cellspacing="0">
    </table>
    <div id="jqgpClients" style="text-align: center;">
    </div>
</div>
@section JavaScript{
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqgClients').jqGrid({
                //url from which data should get
                url: '@Url.Action("Clients")',
                //type of data
                datatype: 'json',
                //url access method type
                mtype: 'POST',
                //columns names
                colNames: ['ClientId', 'CompanyName', 'Address', 'City', 'State', 'Zip', 'ContactName', 'Designation', 'Telephone', 'Fax', 'Email'],
                //columns model
                colModel: [
                    { name: 'ClientId', index: 'ClientId', align: 'left', editable: false },
                    { name: 'CompanyName', index: 'CompanyName', align: 'left', editable: true, edittype: 'text', editoptions: { maxlength: 60 }, editrules: { required: true, edithidden: true}, formoptions: { rowpos: 1, colpos: 1} },
                    { name: 'Address', index: 'Address', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 60 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 1, colpos: 2} },
                    { name: 'City', index: 'City', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 60 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 1, colpos: 3} },
                    { name: 'State', index: 'State', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 60 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 2, colpos: 1} },
                    { name: 'Zip', index: 'Zip', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 60 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 2, colpos: 2} },
                    { name: 'ContactName', index: 'ContactName', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 60 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 2, colpos: 3} },
                    { name: 'Designation', index: 'Designation', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 60 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 3, colpos: 1} },
                    { name: 'Telephone', index: 'Telephone', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 60 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 3, colpos: 2} },
                    { name: 'Fax', index: 'Fax', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 60 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 3, colpos: 3} },
                    { name: 'Email', index: 'Email', align: 'left', editable: true, edittype: 'text', hidden: false, editoptions: { maxlength: 60 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 4, colpos: 1} },
                ],
                //pager for grid
                pager: $('#jqgpClients'),
                //number of rows per page
                rowNum: 5,
                //initial sorting column
                sortname: 'ClientId',
                //initial sorting direction
                sortorder: 'asc',
                //we want to display total record count
                viewrecords: true,
                //grid height
                height: '100%'
            });
            $('#jqgClients').jqGrid('navGrid', '#jqgpClients',
                { add: true, del: true, edit: true, search: false },
                { width: 'auto', url: '@Url.Action("UpdateClient")' },
                { width: 'auto', url: '@Url.Action("InsertClient")' },
                { width: 'auto', url: '@Url.Action("DeleteClient")' });
        });
    </script>
}
@section PageDescription{
    <h1>
        Client</h1>
    <h3>
        Client details</h3>
    <p> 
         Maintains all information related to clients, including clientid,
         company name and emailid .</p>
}
